//Template Button Css
.btn{
    height: 45px;
    line-height: 45px;
    background-color: transparent;
    background: $secondary__color;
    position: relative;
    overflow: hidden;
    border: 0;
    padding: 0 30px;
    font-size: 15px;
    text-transform: uppercase;
    @media #{$medium__device}{
        padding: 0 22px;
        font-size: 14px;
    }
    @media #{$extra__small}{
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
        font-size: 13px;
    }
    @media #{$small__mobile}{
        height: 42px;
        line-height: 42px;
        padding: 0 22px;
        font-size: 14px;
    }
    &:hover{
        &::before{
            transform: translate3d(0,0,0);
        }
        & span{
            transform: translate3d(0,100%,0);
            display: block;
            opacity: 0;
        }
    }
    &::before{
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        transform: translate3d(100%,0,0);
        transition: transform 0.3s;
        transition-timing-function: ease;
        transition-timing-function: cubic-bezier(.75,0,.125,1);
        display: block;
        background-color: #000000;
        content: attr(data-hover);
        color: #ffffff;
        font-weight: 400;
        line-height: 45px;
        font-size: 15px;
        @media #{$extra__small}{
            line-height: 40px;
            font-size: 13px;
        }
    }
    & span{
        transition: transform 0.3s;
        transition-timing-function: ease;
        transition-timing-function: cubic-bezier(.75,0,.125,1);
        display: block;
         color: #ffffff;
    }
}